<template>
  <div class="login-box">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="登陆">
      <van-icon @click="$router.go(-1)" slot="left" name="cross" />
    </van-nav-bar>
    <!-- /导航栏 -->
    <!-- 登陆表单 -->
    <van-form ref="form" @submit="onSubmit">
      <van-field type='number' maxlength="11" :rules="formRules.mobile" v-model="form.mobile" name="mobile" placeholder="请输入手机号">
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field type='number' maxlength="6" :rules="formRules.code" v-model="form.code" name="code" placeholder='请输入验证码'>
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
         <template #button>
           <van-count-down v-if="isCount" :time="6000" format="ss 秒"  @finish="isCount = false" />
           <van-button v-else native-type="button" @click="onSendCode" class="send-code" round size="small" type="primary">获取验证码</van-button>
          </template>
      </van-field>
      <div>
        <van-button class="login-button" block type="info" native-type="submit">
          登陆
        </van-button>
      </div>
    </van-form>
    <!-- /登陆表单 -->
  </div>
</template>

<script>
import { login, getCode } from '@/api/user.js'
export default {
  name: 'login',
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      // 校验规则
      formRules: {
        mobile: [
          { required: true, message: '请输入手机号!' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号不能为空!' }
        ],
        code: [
          { required: true, message: '验证码不能为空!' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' }
        ]
      },
      // 控制是否显示倒计时
      isCount: false
    }
  },

  created () {

  },

  methods: {
    // 提交登陆表单
    async onSubmit () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0 // 持续展示 toast
      })
      // 获取表单数据
      const user = this.form
      try {
        const { data: res } = await login(user)
        this.$store.commit('setUser', res.data)
        this.$toast.success('登陆成功!')
        this.$router.push('/my')
      } catch (err) {
        if (err.response.status === 400) return this.$toast.fail('手机号或验证码错误!')
        this.$toast.fail('网络错误')
      }
    },
    // 点击发送验证码
    async onSendCode () {
      try {
        await this.$refs.form.validate('mobile')
      } catch (err) {
        return true
      }
      this.isCount = true
      // 发送请求发送验证码
      try {
        await getCode(this.form.mobile)
      } catch (err) {
        this.isCount = false
        if (err.response && err.response.status === 429) return this.$toast.fail('操作频繁，请稍后重试!')
        this.$toast.fail('网络错误，请稍后重试!')
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .login-box {
    .login-button {
      margin: 53px 28px;
      width: 694px;
      height: 88px;
      background-color: #3296fa;
      border-radius: 10px;
      border: none;
    }
    .toutiao {
      font-size: 37px;
    }
    .send-code {
      width: 152px;
      height: 46px;
      background: #ededed;
      border: none;
      font-size: 22px;
    }
  }
</style>
